import styled from 'styled-components'
import type { CenterPageDataType } from '@/api/data/centerPageData'
import { get } from '@/api/http'
import { centerPageDataApi } from '@/api/data'
import { ResultEnum } from '@/enums/httpEnum'
import { useEffect, useState } from 'react'
import { Map } from './echarts/Map'

const CenterContainer = styled.div`
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 2.8fr 1fr;
	gap: 20px;
`

const fetchImageDom = (index: number, title: string) => {
	const imageUrl = new URL(
		`../../../../assets/images/center-details-data${index}.png`,
		import.meta.url,
	)
	return <img className="w-25 h-25" src={imageUrl.href} alt={title} />
}

export const Center = () => {
	const [centerData, setCenterData] = useState<CenterPageDataType>()

	const fetchData = async () => {
		const { code, data } = await get(centerPageDataApi)
		if (code === ResultEnum.SUCCESS) {
			setCenterData(data)
		}
	}

	useEffect(() => {
		fetchData()
	}, [])

	return centerData ? (
		<CenterContainer>
			<Map mapData={centerData.mapData} />
			<div className="w-full h-full">
				<div className="w-full h-full grid grid-cols-3 gap-3.5">
					{centerData.detailsList.map((item, index) => {
						return (
							<div
								key={index}
								className="flex items-center relative rounded-[5px] border border-solid border-[#343f4b] bg-[#13192fcc]">
								{fetchImageDom(index + 1, item.title)}
								<div className="ml-[10px]">
									<h3 className="text-[#bcdcff] text-base mb-5">
										{item.title}
									</h3>
									<span className="font-bold text-xl bg-linear-to-b from-white to-[#4db6e5] text-transparent bg-clip-text">
										{item.number}
									</span>
									<span className="font-bold bg-linear-to-b from-white to-[#4db6e5] text-transparent bg-clip-text text-base ml-[10px]">
										{item.unit}
									</span>
								</div>
							</div>
						)
					})}
				</div>
			</div>
		</CenterContainer>
	) : (
		'loading...'
	)
}
